<template>
	<view class="body">
		<view class="top">
			<view class="aravat">
				<image :src="params.image" style="width: 100%;" mode="widthFix"></image>
			</view>
			<view class="top_right">
				<view class="top_right_title">
					{{params.name}}
				</view>
				<view class="top_right_detail">
					<text class="top_right_detail_tips">回收价:</text>
					<text class="top_right_detail_pic">￥{{params.buyPrice}}</text>
					<text class="top_right_detail_tips">补贴:</text>
					<text class="top_right_detail_pic">￥{{params.subsidy}}</text>
				</view>
			</view>
		</view>
		<view class="form">
			<view class="form_title">寄售</view>
			<view class="form_e_title">Consignment</view>
			<view class="piliangbtn">
				<view class="">
				</view>
				<!-- 纯图片 -->
				<view class="piliang" @click="uploadImg3()" v-if="uploadType==2">
					<image src="/static/image/down.png" class="w28" mode=""></image>
					批量上传
				</view>
				<!-- 码加图 -->
				<view class="piliang" @click="uploadImg2()" v-else-if="uploadType==3">
					<image src="/static/image/down.png" class="w28" mode=""></image>
					批量上传
				</view>
				<!-- 纯券码 -->
				<view class="piliang" @click="uploadImg1()" v-else>
					<image src="/static/image/down.png" class="w28" mode=""></image>
					批量上传
				</view>
			</view>
			<view class="" v-if="inputshow">

				<view class="inputbox">
					<textarea v-model="inputvalue" @blur="blur" />
					<!-- <input v-model="inputvalue" type="texte" class="inputbox1" /> -->
				</view>
				<view class="tips">共检测到{{num}}条数据,{{result.duplicates.length}}条重复，{{result.notEqual10Count}}条错误</view>
				<view style="margin-top: 24rpx; display: flex; align-items: center; gap: 24rpx;">
					<view class="shangchuan" @click="shangchuan()">
						上传
					</view>
					<view class="tips">
						注：每行一条，多条请换行
					</view>
				</view>
			</view>
			<view class="">
				<scroll-view scroll-y="true" class='scroll-view' show-scrollbar='false'>
					<view class="li" v-for="(item,index) in cardAddVOS" :key="index">
						<view class="li_top">
							<view class="name">
								券{{index + 1}}
							</view>
							<view class="disC">
								<view class="img" @click='addLi()' style="margin-right: 30rpx;">
									<image src="../../static/image/add01.png" style="width: 100%;" mode="widthFix">
									</image>
								</view>
								<view class="img" @click='delItem(index)'>
									<image src="../../static/image/del01.png" style="width: 100%;" mode="widthFix">
									</image>
								</view>
							</view>
						</view>
						<view class="li_center " v-if="uploadType==3 || uploadType==2">
							<view class="name">
								券码
							</view>
							<view class="qrCode" @click="updateQrCode(index)">
								<image v-if="item.couponCode" :src="item.couponCode" class="quan" mode="widthFix"
									@click.stop="showBig(item.couponCode)">
								</image>
								<view class="tips" v-else>
									点击上传图片
								</view>
							</view>
							<image src="../../static/image/clear.png" class="del" mode="widthFix" v-if="item.couponCode"
								@click.stop="delItemImg(index)">
							</image>
						</view>
						<view class="li_center" v-if="uploadType==3 || uploadType==1 || uploadType==4 ">
							<view class="name">
								兑换码
							</view>
							<view class="">
								<input v-model="item.code" class="code" />
							</view>
						</view>
						<view class="li_center">
							<view class="name">
								有效期
							</view>
							<view class="">
								<input v-model="item.lifespan" :disabled="true" class="time" />
							</view>
						</view>
					</view>
				</scroll-view>

			</view>

		</view>
		<view class="bottom">
			<view class="bottom_item" @click="goHome()">
				<view class="">
					<image src="../../static/image/home.png" class="del" mode="widthFix" style="width: 40rpx;"></image>
				</view>
				<view class="name">
					首页
				</view>
			</view>
			<view class="bottom_item" @click="goCoupon()">
				<view class="">
					<image src="../../static/image/coupon.png" class="del" mode="widthFix" style="width: 40rpx;">
					</image>
				</view>
				<view class="name">
					卡券
				</view>
			</view>
			<view class="bottom_item" @click="showModal = true">
				<view class="">
					<image src="../../static/image/kefu.png" class="del" mode="widthFix" style="width: 40rpx;"></image>
				</view>
				<view class="name">
					客服
				</view>
			</view>
			<view class="save" @click="save">
				提交
			</view>
		</view>
		<customerService v-model:visible="showModal" @close="handleClose" />
		<Movable @close='close' :imgVal='couponCode' v-if='isShow'></Movable>
	</view>
</template>

<script>
	import customerService from '@/compontents/CustomerService.vue'
	import Movable from '@/compontents/Movable.vue'
	import {
		batchAdd
	} from '@/api.js'
	export default {
		components: {
			customerService,
			Movable
		},
		data() {
			return {
				params: {},
				cardAddVOS: [{
					lifespan: 1000
				}],
				showModal: false,
				uploadType: 0,
				inputshow: false,
				inputvalue: '',
				isShow: false,
				couponCode: '',
				isLock: false,
				num: 0,
				result: {
					duplicates: [],
					notEqual10Count: 0,
				}
			}
		},
		onLoad(options) {
			this.params = JSON.parse(decodeURI(options.params))
			this.uploadType = this.params.uploadType
			this.cardAddVOS[0].lifespan = this.params.lifespan
		},

		methods: {
			close() {
				this.isShow = false
			},
			showBig(url) {
				this.couponCode = url
				if (this.couponCode) {
					this.isShow = true
				}

			},
			// 纯券码
			uploadImg1() {
				this.inputshow = true
			},
			handleClose() {
				this.showModal = false
				console.log('弹窗关闭回调')
			},
			// 跳转首页
			goHome() {
				uni.switchTab({
					url: '/pages/index/index'
				})

			},
			goCoupon() {
				uni.switchTab({
					url: '/pages/order/order'
				})
			},
			// 码加图
			uploadImg2() {
				var that = this

				uni.chooseImage({
					count: 999,
					success: (chooseImageRes) => {
						uni.showLoading({
							title: '加载中',
							mask: true,
						})
						const tempFilePaths = chooseImageRes.tempFilePaths;
						that.cardAddVOS = []
						let num = 0
						for (let i = 0; i < tempFilePaths.length; i++) {
							uni.uploadFile({
								url: 'https://fykq.appldkj.com/api/jeecg-boot/sys/common/uploadAndQRCode', //仅为示例，非真实的接口地址
								filePath: tempFilePaths[i],
								name: 'file',
								formData: {
									'user': 'test'
								},
								success: (uploadFileRes) => {
									num += 1
									if (num >= tempFilePaths.length) {
										uni.hideLoading()
									}
									let msg = JSON.parse(uploadFileRes.data)
									that.cardAddVOS.push({
										couponCode: msg.message,
										code: msg.result,
										lifespan: that.params.lifespan
									})
									console.log('that.cardAddVOSthat.cardAddVOS', that.cardAddVOS);
								}
							});
						}
					}
				});
			},
			// 纯图片
			uploadImg3() {
				var that = this
				uni.chooseImage({
					count: 999,
					success: (chooseImageRes) => {
						uni.showLoading({
							title: '加载中',
							mask: true,
						})
						const tempFilePaths = chooseImageRes.tempFilePaths;
						that.cardAddVOS = []
						console.log(tempFilePaths, 'tempFilePathstempFilePathstempFilePaths');
						let num = 0
						for (let i = 0; i < tempFilePaths.length; i++) {
							console.log(tempFilePaths[i], 'tempFilePathstempFilePathstempFilePaths');
							uni.uploadFile({
								url: 'https://fykq.appldkj.com/api/jeecg-boot/sys/common/uploadAndQRCode', //仅为示例，非真实的接口地址
								filePath: tempFilePaths[i],
								name: 'file',
								formData: {
									'user': 'test'
								},
								success: (uploadFileRes) => {
									num += 1
									if (num >= tempFilePaths.length) {
										uni.hideLoading()
									}
									let msg = JSON.parse(uploadFileRes.data)
									console.log('msg', msg);
									that.cardAddVOS.push({
										couponCode: msg.message,
										lifespan: that.params.lifespan
									})
									console.log('that.cardAddVOSthat.cardAddVOS', that.cardAddVOS);
								}
							});
						}


					}
				});
			},

			// 纯券码
			shangchuan() {
				var that = this
				that.cardAddVOS = []
				var inputvalues = that.inputvalue.split(/\r?\n/)
				console.log('inputvalues', inputvalues);
				for (let i = 0; i < inputvalues.length; i++) {
					that.cardAddVOS.push({
						couponCode: '',
						code: inputvalues[i],
						lifespan: that.params.lifespan
					})
				}
				that.inputshow = false
			},
			blur() {
				var inputvalues = this.inputvalue.split(/\r?\n/)
				console.log('inputvalues', inputvalues);
				this.num = inputvalues.length
				let res = this.processStringArray(inputvalues)
				this.result = res

			},


			processStringArray(inputValues) {
				// 1. 去除所有项的空格
				const trimmedArray = inputValues.map(item => item.replace(/\s+/g, ''));

				// 2. 统计重复项
				const countMap = trimmedArray.reduce((acc, curr) => {
					acc[curr] = (acc[curr] || 0) + 1;
					return acc;
				}, {});

				// 3. 统计长度不等于10的项
				const notEqual10Count = trimmedArray.filter(item => item.length !== 12 && item.length !== 14).length;

				return {
					trimmedArray, // 处理后的数组
					countMap, // 所有项的计数统计
					duplicates: Object.entries(countMap)
						.filter(([_, count]) => count > 1), // 只返回重复项
					notEqual10Count // 长度不等于10的数量
				};
			},

			updateQrCode(index) {
				if (this.cardAddVOS[index].couponCode) {
					return
				}
				let that = this
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						uni.showLoading({
							title: '加载中',
							mask: true,
						})
						uni.uploadFile({
							url: 'https://fykq.appldkj.com/api/jeecg-boot/sys/common/uploadAndQRCode', //仅为示例，非真实的接口地址
							filePath: res.tempFilePaths[0],
							name: 'file',
							formData: {
								'user': 'test'
							},
							success: (uploadFileRes) => {
								uni.hideLoading()
								let msg = JSON.parse(uploadFileRes.data)
								console.log('msg', msg);
								that.$set(that.cardAddVOS[index], 'couponCode', msg.message)
								that.$set(that.cardAddVOS[index], 'code', msg.result)

							}
						});
					}
				});
			},
			// 删除某一项的图片
			delItemImg(index) {
				this.$set(this.cardAddVOS[index], 'couponCode', '')
			},
			// 新增券
			addLi() {
				this.cardAddVOS.push({
					lifespan: this.params.lifespan,
					couponCode: '',
					code: ''
				})
			},
			delItem(index) {
				let arr = this.cardAddVOS;
				arr = arr.filter((item, i) => i !== index); // 过滤掉索引为index的元素
				this.$set(this, 'cardAddVOS', arr)
			},
			// 批量上传
			async save() {
				if (this.isLock) {
					return
				}
				uni.showLoading({
					title: '加载中',
					mask: true,
				})
				let that = this
				this.isLock = true
				let codeIsNull = false
				console.log('cardAddVOS', this.cardAddVOS);
				// uploadType 1 码    2 图     3 码 + 图
				if (this.uploadType == 1 || this.uploadType == 3) {
					this.cardAddVOS.forEach((el) => {
						if (!el.code || el.code == '') {
							codeIsNull = true
						}
					})
				}
				if (this.uploadType == 2 || this.uploadType == 3) {
					this.cardAddVOS.forEach((el) => {
						if (!el.couponCode || el.couponCode == '') {
							codeIsNull = true
						}
					})
				}
				if (codeIsNull) {
					uni.showToast({
						icon: 'none',
						title: '券码不能为空\n请输入券码',
						duration: 2000,
					});
					return
				}
				const res = await batchAdd({
					cardAddVOS: this.cardAddVOS,
					cardTypeId: this.params.id
				});
				if (res.code == 200) {
					uni.hideLoading()
					uni.showToast({
						icon: 'none',
						title: res.message,
						duration: 3000,
						complete() {
							setTimeout(() => {
								uni.navigateBack()
								that.isLock = false
							}, 3000)
						},
					});
				} else {
					setTimeout(() => {
						that.isLock = false
						uni.hideLoading()
					}, 1000)

				}

			}
		}
	}
</script>

<style lang="scss">
	.body {
		background: #f9f9f9;

		.top {
			width: 750rpx;
			height: 120rpx;
			display: flex;
			justify-content: center;
			background: #fff;

			.aravat {
				width: 100rpx;
				height: 100rpx;
				margin-right: 20rpx;
				border-radius: 100rpx;
				overflow: hidden;
			}

			&_right {
				margin-left: 20rpx;

				&_title {
					font-size: 32rpx;
				}

				&_detail {
					font-size: 24rpx;

					&_tips {}

					&_pic {
						color: red;
					}
				}
			}
		}

		.form {
			background: #fff;
			margin-top: 20rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 710rpx;
			margin-left: 20rpx;

			&_title {
				font-size: 32rpx;
				margin: 30rpx 0 0rpx 0;
				color: #218ad5;
				letter-spacing: 12rpx;
			}

			&_e_title {
				font-size: 24rpx;
				color: #218ad5;
			}

			.scroll-view {
				padding: 10rpx 40rpx 40rpx 40rpx;
				box-sizing: border-box;
				height: calc(100vh - 400rpx - 50rpx);
				height: calc(100vh - 100rpx - 50rpx - constant(safe-area-inset-bottom));
				height: calc(100vh - 340rpx - 88rpx - env(safe-area-inset-bottom));

				/deep/ ::-webkit-scrollbar {
					display: block;
					width: 0 !important;
					height: 0 !important;
					-webkit-appearance: auto !important;
					background: transparent;
					overflow: auto !important;
				}

				.li {
					margin: 20rpx 0 20rpx 0;
					padding: 10rpx;
					box-sizing: border-box;

					&_top {
						display: flex;
						justify-content: space-between;

						.name {
							font-size: 30rpx;
							font-weight: 400;
							border: #218ad5 1rpx solid;
							color: #218ad5;
							padding: 4rpx 30rpx;
							border-radius: 10rpx;

						}

						.img {
							width: 42rpx;
							height: 42rpx;
						}
					}

					&_center {
						margin: 40rpx 0;
						display: flex;
						align-items: center;
						border: 1rpx solid #ccc;
						position: relative;

						.name {
							font-weight: 200;
							text-align: right;
							font-size: 28rpx;
							width: 120rpx;
							padding-right: 20rpx;
							box-sizing: border-box;
						}

						.qrCode {
							height: 70rpx;

							position: relative;
							display: flex;
							justify-content: center;
							align-items: center;
							overflow: hidden;



							.add {
								width: 300rpx;
								height: 70rpx;
								line-height: 70rpx;
								font-size: 32rpx;
							}

							.quan {
								width: 70rpx;
								height: 70rpx;
								margin-left: 10rpx;
							}
						}

						.tips {
							width: 300rpx;
							color: #218ad5;
						}

						.del {
							position: absolute;
							right: 20rpx;
							top: 15rpx;
							width: 40rpx;
						}

						.code {
							width: 520rpx;
							height: 70rpx;
							line-height: 70rpx;
							// border: 1rpx solid #999;
							padding: 10rpx;
							box-sizing: border-box;
							font-size: 28rpx;
						}

						.time {
							width: 520rpx;
							height: 70rpx;
							line-height: 70rpx;
							// border: 1rpx solid #999;
							padding: 10rpx;
							box-sizing: border-box;
							font-size: 28rpx;
							// background-color: #eee;
							color: #666;
						}
					}

				}

				.addNewCoupon {
					width: 376rpx;
					height: 60rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					color: #218ad5;
					border: 1rpx solid #218ad5;
					text-align: center;
					margin: 20rpx auto;

					image {
						width: 40rpx;
						height: 40rpx;
					}
				}
			}
		}

		.bottom {
			background: #fff;
			width: 750rpx;
			display: flex;
			align-items: center;
			height: 80rpx;
			position: fixed;
			bottom: calc(constant(safe-area-inset-bottom));
			padding-bottom: constant(safe-area-inset-bottom);
			padding-bottom: env(safe-area-inset-bottom);
			left: 0;

			&_item {
				width: 20%;
				border-right: solid #eee 1rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				// margin: 60rpx 0;

				.name {
					font-size: 28rpx;
				}
			}

			.save {
				text-align: center;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 40%;
				height: 100%;
				background: #218ad5;
				color: #ffffff;
			}
		}
	}

	/deep/ ::-webkit-scrollbar {
		display: block;
		width: 0 !important;
		height: 0 !important;
		-webkit-appearance: auto !important;
		background: transparent;
		overflow: auto !important;
	}

	.piliangbtn {
		margin: 20rpx;
		width: 100%;
		justify-content: space-between;
		display: flex;
		align-items: center;
	}

	.piliang {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 10rpx 20rpx;
		border-radius: 10rpx;
		font-size: 28rpx;
		background: #218ad5;
		color: #ffffff;
		margin-right: 20rpx;
	}

	.w28 {
		width: 28rpx;
		height: 28rpx;
		margin-right: 10rpx;
	}

	.inputbox {
		padding: 10rpx 20rpx;
		justify-content: space-between;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		width: 650rpx;
		max-height: 500rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		border: 2rpx solid #D5E7FC;
	}

	.tips {
		padding: 20rpx 20rpx 10rpx 0;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #666666;
		line-height: 24rpx;
	}

	.inputbox1 {
		width: 80%;
	}

	.shangchuan {
		width: 150rpx;
		height: 60rpx;
		text-align: center;
		background: #56A7FF;
		border-radius: 10rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 26rpx;
		color: #FFFFFF;
		line-height: 52rpx;
	}

	.disC {
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>